<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { queryRecord } from '@/api/wallet'
import type { WalletRecord, WalletLogPageReq } from '@/api/wallet/type'
import { toast, getCurrentMonthStart } from '@/utils/common'
import { BaseResponse } from '@/api/base'

const TypeDesc = {
  1: '充值',
  2: '支付',
  3: '提现',
  4: '收入',
  5: '退款'
}
const StatusDesc = {
  0: '审核中',
  1: '已到账',
  2: '代入账',
  3: '已提现',
  4: '已支付'
}
const monthRange = getCurrentMonthStart()
const recordList = ref<WalletRecord[]>([])
const loadStatus = ref<string>('loadmore')
const moreStatus = ref<boolean>(true)
const queryParam = ref<WalletLogPageReq>({
  pageNum: 1,
  pageSize: 10,
  type: null,
  freeze: false,
  startTimeStr: '',
  endTimeStr: ''
})

const dropdownMenuList = ref<any[]>([
  {
    title: '类型',
    type: 'cell',
    prop: 'type',
    showIcon: true,
    options: [
      { label: '不限', value: null },
      { label: '充值', value: 1 },
      { label: '支付', value: 2 },
      { label: '提现', value: 3 },
      { label: '收入', value: 4 },
      { label: '退款', value: 5 }
    ]
  },
  {
    title: '时间范围',
    type: 'daterange',
    showQuick: false,
    showIcon: true,
    prop: 'date'
  }
])

const loadRecordList = async (freeze?: boolean) => {
  loadStatus.value = 'loading'
  try {
    queryParam.value.freeze = freeze
    const res: BaseResponse = await queryRecord(queryParam.value)
    if (queryParam.value.pageNum == 1 && res.data.records.length < queryParam.value.pageSize) {
      loadStatus.value = 'nomore'
      moreStatus.value = false
      recordList.value = recordList.value.concat(res.data.records)
      queryParam.value.total = res.data.total
      return
    }
    if (!res.data || res.data.records.length == 0 || res.data.total < recordList.value.length) {
      loadStatus.value = 'nomore'
      moreStatus.value = false
      return
    }
    recordList.value = recordList.value.concat(res.data.records)
    loadStatus.value = 'loadmore'
    queryParam.value.pageNum++
  } catch (error: BaseResponse) {
    loadStatus.value = 'nomore'
    moreStatus.value = false
    toast(error.tips)
  }
}
onLoad(async (options: any) => {
  const { freeze } = options
  if (freeze == 1) {
    loadRecordList(true)
  } else {
    loadRecordList()
  }
})
onReachBottom(async () => {
  if (moreStatus.value == true) {
    loadStatus.value = 'loading'
    setTimeout(() => {
      loadRecordList(queryParam.value.freeze)
      loadStatus.value = 'loadmore'
    }, 500)
  }
})

const handleOpen = () => {
  if (!dropdownMenuList.value[0].value) {
    dropdownMenuList.value[0].value = null
  }
  if (!dropdownMenuList.value[1].value) {
    dropdownMenuList.value[1].value = {
      start: monthRange[0],
      end: monthRange[1]
    }
  }
}
const handleConfirm = (v: any) => {
  if (v.date && v.date.start && v.date.end) {
    queryParam.value.startTimeStr = v.date.start + ' 00:00:00'
    queryParam.value.endTimeStr = v.date.end + ' 23:59:59'
  } else {
    queryParam.value.type = v.type
  }
  resetFilter()
}

const resetFilter = () => {
  queryParam.value.pageNum = 1
  recordList.value = []
  loadRecordList(queryParam.value.freeze)
}

</script>

<template>
  <view class="record">
    <!-- 筛选区域 -->
    <view class="record-select">
      <da-dropdown :dropdownMenu="dropdownMenuList" :duration="300" fixedTop @open="handleOpen"
        @confirm="handleConfirm">
      </da-dropdown>
    </view>
    <!-- 流水列表 -->
    <uv-empty class="record-empty" v-if="recordList.length === 0" text="没有数据哦~" icon="../../static/empty.png" width="80"
      height="80"></uv-empty>
    <uv-list v-else :preLoading="false" :status="loadStatus">
      <uv-list-item v-for="item in recordList" :key="item.id" border>
        <template #header>
          <view>
            <uv-text :text="TypeDesc[item.type]" size="28rpx"></uv-text>
            <uv-text :text="item.createTime" size="24rpx" color="#333"></uv-text>
          </view>
        </template>
        <template #footer>
          <view>
            <uv-text :text="item.amount"></uv-text>
            <uv-text :text="StatusDesc[item.status]" style="justify-content: flex-end;"></uv-text>
          </view>
        </template>
      </uv-list-item>
    </uv-list>
  </view>
</template>

<style lang="scss" scoped>
.record-select {
  margin-bottom: 10rpx;
  padding: 0 50rpx 0 50rpx;
  background-color: #fff;

  ::v-deep .uv-drop-down {
    border: none;
  }
}

.record-empty {
  background-color: #f1f1f1;
  margin-top: 80% !important;

}
</style>
